<template>
    <section class="container">
        <!-- 面包屑 -->
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right" v-for="item in hotelData" :key="item.id">
                <el-breadcrumb-item :to="{ path: '/hotel' }"
                    >酒店</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/hotel' }">{{item.real_city}}酒店</el-breadcrumb-item>
                <el-breadcrumb-item>{{item.name}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!-- 酒店名称 -->
        <div class="name" v-for="(hotel_name, index) in hotelData" :key="index">
            <!-- <h2>{{hotel_name.name}}</h2>
            <div class="jiudian-name">
                <div>{{hotel_name.alias}}</div>
                <span><span class="icon el-icon-location-outline"></span>{{hotel_name.address}}</span>
            </div> -->
             <div class="main-title">
                    <h1>
                        {{hotel_name.name}} <span class="iconfont iconhuangguan"></span><span class="iconfont iconhuangguan"></span><span class="iconfont iconhuangguan"></span><span class="iconfont iconhuangguan"></span><span class="iconfont iconhuangguan"></span>
                    </h1>                                                              
              </div>
                <div class="en-title">
                    <span>{{hotel_name.alias}}</span>                                    
                
                    <div class="location">
                        <span :title="hotel_name.address">
                            <span class="icon el-icon-map-location"></span> {{hotel_name.address}}
                        </span>
                    </div>
                </div>
        </div>

        <!-- 酒店图片 -->
        <div class="image">
            <div class="one">
                    <img src="http://157.122.54.189:9093/images/hotel-pics/1.jpeg" alt="" v-if="isShow == 0">
                    <img src="http://157.122.54.189:9093/images/hotel-pics/2.jpeg" alt="" v-if="isShow == 1">
                    <img src="http://157.122.54.189:9093/images/hotel-pics/3.jpeg" alt="" v-if="isShow == 2">
                    <img src="http://157.122.54.189:9093/images/hotel-pics/4.jpeg" alt="" v-if="isShow == 3">
                    <img src="http://157.122.54.189:9093/images/hotel-pics/5.jpeg" alt="" v-if="isShow == 4">
                    <img src="http://157.122.54.189:9093/images/hotel-pics/6.jpeg" alt="" v-if="isShow == 5">
            </div>
            <div class="little">
                    <img src="http://157.122.54.189:9093/images/hotel-pics/1.jpeg" alt="" @click="isShow = 0">
                    <img src="http://157.122.54.189:9093/images/hotel-pics/2.jpeg" alt="" @click="isShow = 1">
                    <img src="http://157.122.54.189:9093/images/hotel-pics/3.jpeg" alt="" @click="isShow = 2">
                    <img src="http://157.122.54.189:9093/images/hotel-pics/4.jpeg" alt="" @click="isShow = 3">
                    <img src="http://157.122.54.189:9093/images/hotel-pics/5.jpeg" alt="" @click="isShow = 4">
                    <img src="http://157.122.54.189:9093/images/hotel-pics/6.jpeg" alt="" @click="isShow = 5">
            </div>
        </div>

        <!-- 酒店价格 -->
        <div class="price">
            <el-table 
            style="width: 100%;" 
            :data="tableData" v-if="tableData.length" 
            @click.native="push('https://hotels.ctrip.com/hotels/694679.html?hotel=694679&tab=1')">
                <el-table-column prop="name" label="价格来源" width="150" custom-class="row" >
                </el-table-column>
                
                <el-table-column prop="bestType" label="低价房型" align="center">
                </el-table-column>

                <el-table-column prop="price" label="最低价格/每晚" width="160" sort-by="1">
                     <template slot-scope="scope">
                        <div class="bestPrice">
                            <span class="up">￥ {{scope.row.price}}</span> 起
                            <span class="icon   el-icon-arrow-right"></span>
                        </div>  
                     </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 酒店地图 -->
            <HotelMap />

        <!-- 酒店信息 -->
        <div>
            <div class="xinxi" v-for="(item,index) in hotelData" :key="index">
                <el-row type="flex" justify="start" class="bom">
                    <el-col :span="5" class="padg">
                        <span>基本信息：</span>
                    </el-col>
                    <el-col>
                        <el-row type="flex" class="padg">
                            <el-col :span="24"><span>入住时间：14:00 之后</span></el-col>
                            <el-col :span="24"><span>离店时间：12:00 之后</span></el-col>
                            <el-col :span="24"><span> {{item.creation_time}} / {{item.renovat_time}} </span></el-col>
                            <el-col :span="24"><span>酒店规模：{{item.roomCount}} 间客房</span></el-col>
                        </el-row>
                    </el-col>
                </el-row>

                <el-row type="flex" justify="space-between" class="bom">
                    <el-col :span="4" class="padg">
                        <span class="i">主要设施：</span>
                    </el-col>
                    <el-col class="padg">
                        <div v-if="item.hotelassets">
                            <span class="facility" v-for="padg_item in item.hotelassets" :key="padg_item.id">
                                {{ padg_item.name }}    
                            </span>
                        </div>
                        <span v-else> - </span>
                    </el-col>
                </el-row>

                <el-row type="flex" justify="space-between" class="bom">
                    <el-col :span="4" class="padg">
                        <span class="i">停车服务：</span>
                    </el-col>
                    <el-col class="padg">
                        <span v-if="item.parking"> {{item.parking}} </span>
                        <span v-else>-</span>
                    </el-col>
                </el-row>

                <el-row type="flex" justify="space-between" class="bom">
                    <el-col :span="4" class="padg">
                        <span class="i">品牌信息：</span>
                    </el-col>
                    <el-col class="padg">
                        <div v-if="item.hotelbrand">{{ item.hotelbrand.name }}</div>
                        <div v-else> - </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        
        <!-- 用户评论 -->
        <div>
            <HotelComment :data='commentdata' v-if='commentdata'/>
        </div>

        <div>
            <HCommentList :id='$route.query.id'/>
        </div>
    </section>
</template>

<script>
export default {
    data() {
        return {
            isShow: 0,
            // 酒店信息数据
            hotelData: {},
            tableData: [],
            commentdata:''
        }
    },
    created() {
        this.$axios({
            url: '/hotels?id=' + this.$route.query.id,
        }).then(res => {
            console.log(res.data);
            this.data = res.data
            this.hotelData = res.data.data
            this.tableData = res.data.data[0].products
            this.commentdata = res.data.data[0]
            // console.log( this.tableData ,' this.tableData ');
            // console.log(33,res);
           
        })
    },
    methods:{
        push(url){
            
            window.open(url)
        }
    }
};
</script>

<style lang="less" scoped>
.iconhuangguan {
    color: #ff9900;
}
.container {
    width: 1000px;
    margin: 0 auto;
}
.breadcrumb {
    padding: 20px 0;
}

.name {
    margin-bottom: 20px;
        .main-title {
            color: #333;
            line-height: 30px;
            font-size: 24px;
            color: #333;
            line-height: 30px;
            h1 {
                font-weight: 400; 
                font-size: 24px;
            }
        }
        .en-title {
            color: #976666;
            padding: 0;
            font-size: 14px;
                .location {
                    .icon {
                        color: #333;
                    }
                }
        }
}

.image {
    display: flex;
    height: 360px;
    margin: 40px 0;
    .one {
        width: 640px;
        height: 360px;
        padding-right: 20px;
        img {
            width: 640px;
            height: 100%;
        }
    }
    .little {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: space-between;
        flex: 1;
        img {
            cursor: pointer;
            width: 48%;
            height: 31%;
            padding-top: 12px;
        }
        img:nth-child(1) {
                padding-top: 0;
        }
        img:nth-child(2) {
                padding-top: 0;
        }

    }
}

.price {
    /deep/.el-table__row{
        cursor: pointer;
    }
    margin: 40px 0;
    
    .bestPrice{
        .up{
            font-size: larger;
            color: #ff9900;
        }
        .icon {
            font-size: 16px;
            color: #ff9900;
        }
    }
    
}

.xinxi {
    font-size: 14px;
    margin: 40px 0;
    .bom {
        border-bottom: 1px solid #eee;
    }
    .padg {
        padding: 20px 10px;
    }
    .facility {
      background-color: #eee;
      color: #666;
      padding: 4px 10px;
      border-radius: 4px;
      margin-right: 5px;
    }
}

.en-title {
    font-size: 14px;
    line-height: 24px;
    padding-top:10px 
}
</style>